<template>
  <div style="height: 6vh;background-color:#fff;padding: 10px 20px;">
    <span style="line-height: 60px;font-size: 20px;">车辆分配</span>
  </div>
  <!-- 申请单搜索卡片 --->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="工单负责人">
        <el-input placeholder="请输入申请人" style="width: 220px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button>重置</el-button>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 工单信息列表 -->
  <el-card style="margin: 20px;">
    <el-radio-group>
      <el-radio-button>待分配</el-radio-button>
      <el-radio-button>已分配</el-radio-button>
    </el-radio-group>
    <el-table>
      <el-table-column label="编号"></el-table-column>
      <el-table-column label="工单申请人"></el-table-column>
      <el-table-column label="申请时间"></el-table-column>
      <el-table-column label="出发地"></el-table-column>
      <el-table-column label="目的地"></el-table-column>
      <el-table-column label="用车事由"></el-table-column>
      <el-table-column label="使用开始时间"></el-table-column>
      <el-table-column label="使用结束时间"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" link>分配用车</el-button>
          <el-button type="primary" link>还车</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 围栏车辆概览弹窗 -->
  <el-dialog title="围栏列表">
    <el-form>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="围栏名称">
            <el-input>请输入</el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="围栏状态">
            <el-select label="请选择">
              <el-option label="启用"></el-option>
              <el-option label="关闭"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8"></el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button>重置</el-button>
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table>
      <el-table-column label="编号"></el-table-column>
      <el-table-column label="围栏名称"></el-table-column>
      <el-table-column label="车辆总数"></el-table-column>
      <el-table-column label="可用车辆"></el-table-column>
      <el-table-column label="围栏状态"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" link>查看车辆</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  <el-dialog title="分配车辆">
    <el-table>
      <el-table-column label="编号"></el-table-column>
      <el-table-column label="车辆品牌"></el-table-column>
      <el-table-column label="车牌号"></el-table-column>
      <el-table-column label="车辆类型"></el-table-column>
      <el-table-column label="车辆状态"></el-table-column>
      <el-table-column label="操作"></el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>

</script>

<style scoped>

</style>
